<template>
    <div class="header-bg">
        <div class="left">
            <div class="logo-box">
                <img src="../assets/logo.png" alt="logo" class="logo">
                <h4>综合业务管理系统</h4>
            </div>
            <div class="interval-line"></div>
            <p>{{activePage}}</p>
            <header-select-box></header-select-box>
        </div>
        <div class="right">
            <div class="search-box">
                <i class="el-icon-search"></i>
                <input type="text" name="search" id="search" placeholder="搜索">
            </div>
            <div class="top-nav">
                <template v-for="item in nav" :key="item.name">
                    <router-link :to="item.url">{{item.name}}</router-link>
                </template>
                
            </div>
            <div class="user">
                <router-link to="/personal">
                <div class="user-photo">
                    <img src="../assets/user-photo.png">
                </div>
                <p>陈先生</p>
                </router-link>
            </div>
            <div class="interval-line"></div>
            <div class="message">
                <i class="el-icon-message"></i>
                <!-- <img src="../assets/message.png"> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import HeaderSelectBox from './HeaderSelectBox.vue'

export default defineComponent({
  components: { HeaderSelectBox },
  props:['activePage'],
    setup () {
        let nav = reactive([
            {name: '工作台', url: '/workbench'},
            {name: '资源中心', url: ''},
            {name: '帮助', url: '/help'},
            {name: '常见问题', url: ''},
            {name: '服务支持', url: ''},
        ]);
        return {
            nav,
        }
    }
})
</script>

<style scoped lang="scss">
.header-bg{
    height: 42px;
    width: 100vw;
    box-sizing: border-box;
    padding-bottom: 3px;
    padding-right: 10px;
    background: #292B33;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    color: rgb(173, 176, 184);
    position: fixed;
    z-index: 1000;
}
.interval-line{
    width: 1px;
    height: 16px;
    background: #50535a;
    margin: 0 10px;
}
.left{
    display: flex;
    align-items: center;
    .logo-box{
        display: flex;
        align-items: center;
        margin: 0 10px;
        .logo{
            width: 26px;
            height: 26px;
            margin-right: 10px;
        }
        h4{
            line-height: 54px;
            margin: 0;
            font-size: 16px;
            color: #fff;
            font-weight: normal;
        }
    }
    p{
        margin: 0 10px;
    }
}
.right{
    display: flex;
    align-items: center;
    .search-box{
        position: relative;
        .el-icon-search{
            font-weight: bold;
            position: absolute;
            top: 7px;
            left: 16px;
        }
    }
    input{
        box-sizing: border-box;
        height: 26px;
        width: 190px;
        margin: 0 10px;
        background: #181818;
        border: none;
        outline: none;
        padding: 0 22px;
        font-size: 12px;
        color: #adb0b8;
    }
    .top-nav{
        // margin: 0 10px;
        a{
            color: #adb0b8;
            margin: 0 10px;
        }
        a:hover{
            color: #fff;
        }
    }
    .user>a{
        display: flex;
        align-items: center;
        margin: 0 10px;
        .user-photo{
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin-right: 6px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        p{
            color: #adb0b8;
        }
        p:hover{
            color: #fff;
        }
    }
    .message{
        width: 20px;
        height: 20px;
        margin: 0 10px;
        i{
            font-size: 16px;
            text-align: center;
            line-height: 20px;
        }
        img{
            width: 100%;
            height: 100%;
        }
    }

}

</style>